<template>
<el-container style="height: 100vh; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu id='sidemenu' :default-openeds="default_openeds_array" active-text-color="#409EFF" unique-opened="true" :default-active="this.$route.name" @open="handleOpen">
        <p index="0" id="sugar" style="margin: 0; font: 30px bold; height: 60px; line-height: 60px; background-color: rgb(15,48,90); color: #ffffff">Sugar</p>
        <el-menu-item index="0" module="dashboard" @click="tomodule('dashboard')"><i class="el-icon-message"></i>总览</el-menu-item>
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>模型管理</template>
        <!-- <el-menu-item-group>
        <template slot="title">分组一</template> -->
        <el-menu-item index="modellist-mine" level="2" @click="toMyModelList()">我创建的模型</el-menu-item>
        <el-menu-item index="modellist-grant" level="2" @click="toGrantModelList()">被授权的模型</el-menu-item>
        <!-- </el-menu-item-group> -->
        <!-- <el-menu-item-group title="分组2"> -->
        <el-menu-item index="modellist-public" level="2" @click="toPublicModelList()">公有模型</el-menu-item>
        <!-- </el-menu-item-group> -->
        <!-- <el-submenu index="1-4">
        <template slot="title">选项4</template>
        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu> -->
    </el-submenu>
    <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>数据管理</template>
        <!-- <el-menu-item-group>
        <template slot="title">分组一</template> -->
        <el-menu-item index="datasetlist-mine" level="2" @click="toMyDatasetList()">我创建的数据集</el-menu-item>
        <el-menu-item index="datasetlist-grant" level="2" @click="toGrantDatasetList()">被授权的数据集</el-menu-item>
        <!-- </el-menu-item-group> -->
        <!-- <el-menu-item-group title="分组2"> -->
        <el-menu-item index="datasetlist-public" level="2" @click="toPublicDatasetList()">公有数据集</el-menu-item>
        <!-- </el-menu-item-group> -->
        <!-- <el-submenu index="2-4"> -->
        <!-- <template slot="title">选项4</template>
        <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu> -->
    </el-submenu>
    <el-menu-item index="trainjoblist-mine" @click="toMyTrainjobList()"><i class="el-icon-message"></i>训练任务</el-menu-item>
    <el-menu-item index="applist-mine" @click="toMyAppList()"><i class="el-icon-message"></i>应用管理</el-menu-item>
    <!-- <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>训练任务</template>
        <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="3-1">选项1</el-menu-item>
        <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
        <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
        <template slot="title">选项4</template>
        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
    </el-submenu>
    <el-submenu index="4">
        <template slot="title"><i class="el-icon-setting"></i>应用管理</template>
        <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="3-1">选项1</el-menu-item>
        <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
        <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
        <template slot="title">选项4</template>
        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
    </el-submenu> -->
    <!-- <el-menu-item index="5"><i class="el-icon-message"></i>集群资源</el-menu-item> -->
    </el-menu>
</el-aside>

<el-container>
    <el-header style="text-align: right; font-size: 12px">
      <span style="float: left; font-size: 15px">{{map_page_name[this.$route.name]}}</span>
    <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="resetPassword()">修改密码</el-dropdown-item>
        <el-dropdown-item @click.native="logout()">注销</el-dropdown-item>
        <!-- <el-dropdown-item>删除</el-dropdown-item> -->
        </el-dropdown-menu>
    </el-dropdown>
    <span>{{user}}</span>
    </el-header>
    <el-main>
        <transition name="fade-transform" mode="out-in">
        <keep-alive>
          <router-view ref="routerview" :title="title"/>
        </keep-alive>
      </transition>
    <!-- <el-table :data="tableData">
        <el-table-column prop="date" label="日期" width="140">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
    </el-table> -->
    </el-main>
</el-container>
</el-container>
</template>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: rgb(247, 193, 18);
  }
  /* .el-submenu {
    background-color:rgb(238, 241, 246);
    font: 15px bold;
    /* height: 70px; */
  /* } */
  .el-menu-item, .el-submenu__title  {
    color: #333;
    background-color:rgb(238, 241, 246);
    font: 16px bold !important;
    height: 80px !important;
    line-height: 80px !important;
  }
  [level="2"] {
    font: 14px bold !important;
    height: 60px !important;
    line-height: 60px !important;
  }
  /* .el-submenu>.el-menu-item {
    font: 25px bold;
    line-height: 90px;
    height: 90px;
  } */
  /* .el-submenu__title {
    outline: 0 !important;
    color: #409EFF !important;
    background: none !important;
} */
  /* .el-submenu__title:focus, .el-submenu__title:hover {
    height: 80px;
    line-height: 60px;
    border-bottom: 2px solid transparent;
    color: #fff;
    font-size: 30px;
  } */
  /* .el-menu--vertical .el-menu .el-menu-item {
    float: none;
    height: 23px;
    line-height: 23px;
    width: auto;
    font-size: 30px;
  } */
  /* .el-menu--vertical .el-menu .el-submenu>.el-submenu__title {
    float: none;
    height: 23px;
    line-height: 23px;
    font-size: 30px;
  } */
</style>

<script>
import store from '@/store'
// import Datasetlist from '@/views/dataset/DatasetList'
export default {
  data () {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }
    return {
      title: 'title',
      user: store.getters.user,
      default_openeds_array: [],
      tableData: Array(20).fill(item),
      map_page_name: {
        'main': '主页',
        'dashboard': '总览',
        'datasetlist-mine': '数据集/我创建的数据集',
        'datasetlist-public': '数据集/公共数据集',
        'datasetlist-grant': '数据集/被授权的数据集',
        'dataset-detail': '数据集/数据集详情',
        'dataset-member': '数据集/数据集成员',
        'dataset-create': '数据集/创建数据集',
        'modellist-mine': '模型/我创建的模型',
        'modellist-public': '模型/公共模型',
        'modellist-grant': '模型/被授权的模型',
        'model-detail': '模型/模型详情',
        'model-version-detail': '模型/历史模型详情',
        'model-member': '模型/模型成员',
        'model-create': '模型/创建模型',
        'trainjoblist-mine': '训练任务/我的训练任务',
        'trainjob-create': '训练任务/创建训练任务',
        'trainjob-detail': '训练任务/训练任务详情',
        'applist-mine': 'AI应用/我的AI应用',
        'app-create': 'AI应用/创建应用',
        'app-detail': 'AI应用/应用详情'
      }
    }
  },
  methods: {
    logout () {
      console.log(store.getters.token)
      console.log(store.getters.user)
      store.commit('logout')
      console.log(store.getters.user)
      this.$router.replace({path: '/login'})
    },
    resetPassword () {
      this.$router.push({path: '/password/reset'})
    },
    tomodule (module) {
      this.$router.replace({path: '/' + module})
    },
    toMyDatasetList () {
      this.$router.push({path: '/dataset/list/mine'})
    },
    toGrantDatasetList () {
      this.$router.push({path: '/dataset/list/grant'})
    },
    toPublicDatasetList () {
      this.$router.push({path: '/dataset/list/public'})
    },
    toMyModelList () {
      this.$router.push({path: '/model/list/mine'})
    },
    toPublicModelList () {
      this.$router.push({path: '/model/list/public'})
    },
    toGrantModelList () {
      this.$router.push({path: '/model/list/grant'})
    },
    toMyTrainjobList () {
      this.$router.push({path: '/trainjob/list/mine'})
    },
    toMyAppList () {
      this.$router.push({path: '/app/list/mine'})
    },
    handleOpen (key) {
      this.default_openeds_array.push(key)
    }
  },
  activated () {
  },
  created () {
    console.log(store.getters.user)
    this.user = store.getters.user
    console.log(this.user)
    if (!store.getters.token) {
      this.$router.push({path: '/login'})
    } else {
      // this.$router.push({path: '/dashboard'})
      // this.$router.go(0)
    }
  }
}
</script>
